<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <title>Canvas Draw Rect</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    body {
        font-size: 12px;
    }

    .canvas-wrap {

    }
    .canvas-buts {
        position: fixed;
        z-index: 10;
        right: 0;
        top: 0;
    }
    .canvas-button {
        margin-right: 10px;
        margin-top: 10px;
        padding: 10px 15px;
        background: #666;
        color: #fff;
    }
    .canvas {

    }
    .fix {
        color: #ddd;
    }
    </style>
</head>
<body>

    <div id="img_container"  class="canvas-wrap">
        <div id="img_container_inner">
            <canvas class="canvas" id="canvas" width="300" height="300"
                data-src="https://znxunzhi-ajiaedu-image-bucket.oss-cn-shenzhen.aliyuncs.com/cardFiles/pageImages/2018/0816/A_0/1534418746604_0.jpg">
                    当前浏览器不支持 Canvas
            </canvas>
        </div>
        <div class="canvas-buts">
            <div><button type="button" class="canvas-button" id="clearRectList">全部清除</button></div>
            <div><button type="button" class="canvas-button" id="clearRectSelect">删除选中</button></div>
            <div><button type="button" class="canvas-button" id="getRectListInfo">全部信息</button></div>
            <div><button type="button" class="canvas-button" id="getRectSelectInfo">选中信息</button></div>
            <div><button type="button" class="canvas-button" id="setRectScaleUp">放大一倍</button></div>
            <div><button type="button" class="canvas-button" id="setRectScaleDown">缩小一倍</button></div>
        </div>
    </div>

    <div id="canvasWrap" class="canvas-wrap" data-img="../images/bg.jpg">
       
        
    </div>
    
<script src="jquery.js"></script>
<script src="paperMarker.js"></script>
<script>

    var Marker = {
        /**
         * Initialize QuickMark Canvas
         * load image to canvas and set up paper
         */
        initImgCanvas: function () {
            var $container = $('#img_container'),
                $inner = $("#img_container_inner"),
                $imgs = $inner.find('img'),
                $canvas = $inner.find('canvas');
            var papers = [];

            $canvas.each(function (index, el) {
                var $el = $(el),
                    imgObjList = [],
                    imgUrls = $el.attr('data-src').split('|');
                var count = 0,
                    targetWidth = 0,
                    originHeight = 0;

                $.each(imgUrls, function (i, url) {
                    var imgTemp = new Image();
                    imgTemp.src = decodeURIComponent(url);
                    imgTemp.onload = function (ev) {
                        var imgWidth = this.naturalWidth || this.width,
                            imgHeight = this.naturalHeight || this.height;

                        targetWidth = $el.prev('img').width();
                        // originHeight += imgHeight / imgWidth * targetWidth;

                        count++;
                        if(count >= imgUrls.length) {
                            $el.show();
                            papers.push(Marker.setPaperToCanvas(el, imgObjList, index, targetWidth));
                        }
                    };
                    imgObjList.push(imgTemp);
                });


            });
        },
        /**
         * Setup paper data and PaperMarker module
         */
         setPaperToCanvas: function (canvas, imgObjList, index, canvasWidth) {
            var rawData = [
                [
                    {
                        questNo: '23',
                        score: '4',
                        coord: '10,10;100,100'
                    },
                    {
                        questNo: '24',
                        score: '5',
                        coord: '200,200;300,300'
                    }
                ]
            ];
            var rectData = [];
            if(rawData.length > 0) {
                var rectIndex = 0;
                $.each(rawData[rectIndex], function (i, item) {
                    if(!item) return;

                    var coord = item.coord.split(';');
                    var a = coord[0].split(','),
                        b = coord[1].split(','),
                        x = parseInt(a[0]),
                        y = parseInt(a[1]),
                        width = parseInt(b[0]) - parseInt(a[0]),
                        height = parseInt(b[1]) - parseInt(a[1]),
                        questNo = item.questNo,
                        score = item.score;

                    rectData.push({
                        x: x,
                        y: y,
                        id: questNo,
                        width: width,
                        height: height,
                        custom: {
                            number: questNo,
                            points: score
                        }
                    });
                });
            }

            // var rectMode = 'positive'; //'negative';
            var paperMarker =  new PaperMarker(canvas, imgObjList, {
                // container: window,
                canvasWidth: canvasWidth,
                line: {
                    color: {
                        normal: 'rgb(94, 190, 95)',
                        select: 'rgb(94, 190, 95)',
                        active: 'rgb(60, 60, 60)'
                    }
                },
                text: {
                    font: '26px Arial',
                    color: 'rgb(255, 81, 80)'
                },
                events: {
                    afterSelect: function () {
                        // view.cacluateScore(paperMarker);
                    },
                    afterModify: function (data) {
                        // subMarking.quickMarkDataChanged = true;
                        // view.updateQuickMarkData(index, data);
                    }
                },
                check: {
                    icon: {
                        offsetX: 28,
                        offsetY: 3,
                        positive: '\u2714',
                        negative: '\u2718',
                        font: '30px Arial'
                    }
                },
                data: rectData
            });
            paperMarker.initialize(function () {
                // console.log('init')
            });
            return paperMarker;
        }
    }    

    Marker.initImgCanvas();
       
</script>
</body>
</html>